<template>
  <div class="view">
    <Panel title="课程列表">
      <div slot="header">
        <el-input
          v-model="keyword"
          prefix-icon="el-icon-search"
          placeholder="关键词"
        >
        </el-input>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="加载中"
        ref="table"
        :data="courseList"
        style="width: 100%"
      >
        <el-table-column prop="id" width="80" label="序号"> </el-table-column>
        <el-table-column prop="name" label="课程名称"> </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | localtime }}
          </template>
        </el-table-column>
        <el-table-column width="100" label="可见状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.visible"
              active-text=""
              inactive-text=""
              @change="handleVisibleSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="250" label="操作">
          <div slot-scope="scope">
            <icon-btn
              name="编辑"
              icon="edit"
              @click.native="goEdit(scope.row.id)"
            ></icon-btn>
            <icon-btn
              name="资源管理"
              icon="list-ol"
              @click.native="goCourseResourceMan(scope.row.id)"
            ></icon-btn>
            <icon-btn
              name="资源编排"
              icon="align-justify"
              @click.native="goCourseResourceArr(scope.row.id)"
            ></icon-btn>
            <icon-btn
              name="开课"
              icon="university"
              @click.native="goClassroomList(scope.row.id)"
            ></icon-btn>
          </div>
        </el-table-column>
      </el-table>
      <div class="panel-options">
        <el-pagination
          class="page"
          layout="prev, pager, next"
          @current-change="currentChange"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </Panel>
  </div>
</template>

<script>
import api from '../../api.js'

export default {
  name: 'CourseList',
  data () {
    return {
      pageSize: 10,
      total: 0,
      courseList: [],
      keyword: '',
      loading: false,
      currentPage: 1,
      currentId: 1
    }
  },
  mounted () {
    this.getCourseList(this.currentPage)
  },
  methods: {
    // 切换页码回调
    currentChange (page) {
      this.currentPage = page
      this.getCourseList(page)
    },
    getCourseList (page) {
      this.loading = true
      api.getCourseList((page - 1) * this.pageSize, this.pageSize, this.keyword).then(res => {
        console.log(res.data.data)
        this.loading = false
        this.total = res.data.data.total
        this.courseList = res.data.data.results
      }, res => {
        this.loading = false
      })
    },
    goEdit (courseId) {
      this.$router.push({ name: 'edit-course', params: { courseId } })
    },
    goCourseResourceMan (courseId) {
      this.$router.push({ name: 'course-resource-man', params: { courseId } })
    },
    goCourseResourceArr (courseId) {
      this.$router.push({ name: 'course-resource-arr', params: { courseId } })
    },
    handleVisibleSwitch (row) {
      api.editCourse(row)
    },
    goCreateClassroom (courseId) {
      this.$router.push({ name: 'create-classroom', params: { courseId } })
    },
    goClassroomList (courseId) {
      this.$router.push({ name: 'classroom-list', params: { courseId } })
    }
  },
  watch: {
    'keyword' () {
      this.currentChange(1)
    }
  }
}
</script>
